import './ShopCart.scss'
// A:在组件中使用store中的state,需要用useSelector hook
// A1.引入 useSelector hook

// B 引入dispatch,action 修改store中的数据

// B1.引入 useDispatch hook
import {useSelector, useDispatch} from 'react-redux'
// B2 引入action 生成器函数(在切片中已经导出了)
import {add,cartNumReduce,delGoods,delAllPro} from  "../store/cartSlice"
import {useState} from 'react'

function ShopCart(props){
    // A2 使用useSelector 获取 store中的数据(state)
    const list = useSelector((store)=>store.cartStore.list) //取购物车列表
    const totalNum = useSelector((store)=>store.cartStore.totalNum) //取总数
    const totalPrice = useSelector((store)=>store.cartStore.totalPrice) //取总价

    const dispatch = useDispatch();
    
    console.log(list)

    // 定义全选值
    const [checkAll,setCheckAll] = useState(false); 

    // 添加数量
    const addNum = (id)=>{
        console.log("点了add",id)
        // B3. 跟store关联起来，想修改store中的数据，用dispatch 派发action
        // add 是action生成器，是一个函数，可以传递参数，也可不传
        dispatch( add(id) ) //派发了action,并携带了产品id
    }

    // 减数量
    const reduceNum = (id)=>{
        // 通过dispatch 修改redux中的数据
        dispatch( cartNumReduce(id) )
    }

    // 单个删除
    const handleDelGoods = (e,id)=>{
        // e.preventDefault();
        console.log(e)
        e.preventDefault()  //运用事件对象，阻止事件对象

        // 对于删除这种危险的操作，需要给用户最后一次提醒，确认
        if(window.confirm("确认删除吗")){
            dispatch( delGoods(id) ) //确认的话，再删除
        }
        // dispatch( delGoods(id) )
    }

    //处理复选框
    const changeCheckAllBox = (event)=>{
        console.log(event,event.target.checked)
        setCheckAll(event.target.checked) //设置复选框的值
    }

    //全选，删除
    const handleDelAll = ()=>{
        //获取全选按钮的状态
        console.log(checkAll)

        // 判断是否勾选复选框
        if(checkAll!=true){
            alert("请选择 复选框")
            return;
        }

        // 通过dispatch 派发 action 修改redux中的数据
        dispatch( delAllPro() )
    }

    return (
        <table className="cart" border="1">
            <thead>
                <tr>
                    <th>id</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            {/* <tr>
                <td>1</td>
                <td>HuwWei p50</td>
                <td>5999.0</td>
                <td>
                    <button>+</button>
                    1
                    <button>-</button>
                </td>
                <td>5999.0</td>
                <td><a href="#">删除</a></td>
            </tr> */}

           {
               list.map((item)=>(
                    <tr key={item.id}>
                        <td>{item.id}</td>
                        <td>{item.title}</td>
                        <td>{item.price}</td>
                        <td>
                            {/* 把当前的产品id传过去，好知道修改的是哪个产品 */}
                            <button onClick={()=>addNum(item.id)}>+</button>
                           {item.num}
                            <button onClick={()=>reduceNum(item.id)}>-</button>
                        </td>
                        <td>{item.totalPrice}</td>
                        {/*事件处理函数的第一个参数是 事件对象 */}
                        <td><a href="#" onClick={(e)=>handleDelGoods(e,item.id)}>删除</a></td>
                    </tr>
               ))
           }

            <tr>
                <td colSpan="2">
                    <label>
                        <input 
                            type="checkbox" 
                            checked={checkAll} 
                            onChange={(e)=>changeCheckAllBox(e)}
                        />
                        全选
                    </label>
                    <button onClick={()=>handleDelAll()}>删除</button>
                </td>
                <td colSpan="4">总数：{totalNum}、总价：{totalPrice}、结算</td>
            </tr>
            </tbody>
        </table>
    )
}

export default ShopCart;